<template>
  <div class="alloc-station">
    <i-dialog
      title="选择参与活动电站"
      width="1174px"
      height="448px"
      :visible="visible"
      :close-on-click-modal="false"
      @close="outerClose"
    >
      <TableSearch
        ref="tableSearch"
        :formItemsInline="allocStationType !== 'preview' ? formItemsInline : []"
        :columns="columns"
        :tableData="tableData"
        :form="form"
        :page-name-display="false"
        @handleTableData="handleTableData"
        @reset="reset"
        @multipleSelection="multipleSelection"
        :row-key="handleRowKey"
      >
        <template slot="tableSearchHeader">
          <div class="table-outside-header">
            <div class="search-result-count">
              当前搜索结果<strong>{{ tableData.totalCount || 0 }}</strong
              >条
            </div>
            <el-button
              type="primary"
              @click="handleClearStations"
              v-if="allocStationType !== 'preview'"
              >清空已选电站</el-button
            >
          </div>
        </template>
      </TableSearch>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
// import { cloneDeep } from 'lodash'
import TableSearch from '@/components/TableSearch'
import { merchantStationList } from '@/api/activity'
import formatter from '@/utils/format'
export default {
  name: 'AllocStation',
  components: { TableSearch },
  data() {
    return {
      form: {
        stationName: '',
      },

      formItemsInline: [
        {
          type: 'text',
          value: 'stationName',
          placeholder: '请输入电站名称查询',
          clearable: true,
        },
      ],
      columns: [
        {
          type: 'selection',
          reserveSelection: true,
          hidden: () => {
            return this.allocStationType === 'preview'
          },
        },
        {
          label: '创建日期',
          prop: 'createTime',
          formatter,
        },
        {
          label: '充电站名',
          prop: 'stationName',
        },
        {
          label: '地址描述',
          prop: 'stationAddress',
        },
        {
          label: '包含端口',
          prop: 'deviceCount',
        },
      ],
      tableData: {},
      stations: [],
      // submitStations: [],
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    merchantId: {
      type: Number,
    },
    allocStationType: {
      type: String,
      default: 'select',
    },
    selectStations: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    // merchantId(val, oldVal) {
    //   if (val !== oldVal) {
    //     let params = {
    //       currentPage: 1,
    //       pageSize: 10,
    //     }
    //     this.handleTableData(params)
    //     this.handleClearStations()
    //   }
    // },
  },
  methods: {
    reset() {
      this.form = {
        stationName: '',
      }
    },
    outerClose() {
      this.form = {
        stationName: '',
      }
      this.$emit('update:visible', false)
    },
    _setDefaultSelection() {
      this.tableData.list.forEach((item) => {
        if (
          this.selectStations.filter((station) => item.id === station.id).length
        ) {
          this.$refs.tableSearch.toggleRowSelection(item, true)
        } else {
          this.$refs.tableSearch.toggleRowSelection(item, false)
        }
      })
    },
    handleTableData(params) {
      if (this.allocStationType === 'preview' && this.selectStations.length) {
        //预览状态下且有电站则不请求数据
        this.tableData = {
          list: this.selectStations.slice(
            (params.currentPage - 1) * params.pageSize,
            params.currentPage * params.pageSize
          ),
          totalCount: this.selectStations.length,
        }
        return
      }
      params.mchIds = this.merchantId
      merchantStationList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
        this._setDefaultSelection()
      })
    },
    multipleSelection(val) {
      this.stations = val
    },
    handleRowKey(row) {
      return row.id
    },
    handleClearStations() {
      this.$refs.tableSearch && this.$refs.tableSearch.clearSelection()
      this.stations = []
    },
    cancel() {
      this.outerClose()
      this._setDefaultSelection()
    },
    submit() {
      this.outerClose()
      // this.submitStations = cloneDeep(this.stations)
      this.$emit('refreshTable', this.stations)
    },
  },
}
</script>
<style lang="scss" scoped>
.alloc-station {
  &::v-deep .table-dash {
    padding-top: 0;
  }
}
.table-outside-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
